<template>
  <div id="download-content" ref="box">
    <el-form
      :model="zcShenQing"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="Tjboxx" ref="pdf">
        <h1>仲裁申请书</h1>
        <!-- <div style="font-size: 22px; margin-left: 25px">公司:</div> -->
        <p class="content" style="letter-spacing: 5px; margin-left: 6%">
          <span style="font-weight: 600">申请人:</span>
          
          <span>公司，</span>
        </p>
        <p class="content" style="letter-spacing: 5px">
          地址:
          <span>,统一信用代</span>
        </p>
        <p class="content" style="letter-spacing: 5px">
          码:
          <span
            >,法定代表人:</span
          >
        </p>
        <p class="content" style="letter-spacing: 5px">
          联系方式
          <span>。</span>
        </p>
        <p class="content" style="letter-spacing: 5px">
          <span style="font-weight: 600; margin-left: 3%">被申请人:</span>
      
          <span>性别:</span>
         
          <span>出生日期:</span>
         
          <span>年</span>
       
          <span>月</span>
        </p>
        <p class="content" style="letter-spacing: 5px">
        
          <span>日,身份证号码:</span>
         
          <span>,电话</span>
         
        </p>
        <p class="content" style="letter-spacing: 5px">
          <span>地址:</span>
       
          <span>。</span>
        </p>
        <p class="content" style="letter-spacing: 3px; margin-left: 6%">
          <span style="font-weight: 600">仲裁请求:</span>
          <span
            >1.请求依法裁决被申请人向申请人支付
          
            款
          </span>
        </p>
        <p class="content" style="letter-spacing: 3px">
          <span>金额</span>
          
          <span>元,其中本金</span>
          
          <span>元,利息</span>
          
          <span>元,逾期复</span>
        </p>
        <p class="content" style="letter-spacing: 5px">
          <span>利</span>
         
          <span>,罚息</span>
      
          <span>元。</span>
        </p>
        <p class="content" style="letter-spacing: 5px; margin-left: 6%">
          <span>2.裁决被申请人名下 </span>
         
          <span>车辆经折</span>
        </p>
        <p class="content" style="letter-spacing: 5px">
          <span>价或拍卖,变卖所得价款申请人在上述范围内优先受偿。</span>
        </p>
        <p class="content" style="letter-spacing: 5px; margin-left: 6%">
          <span>3.本案仲裁费由被申请人承担。 </span>
        </p>

        <p class="content" style="letter-spacing: 5px; margin: 5% 0 0 6%">
          <span style="font-weight: 600">事实和理由:</span>
         
        </p>
        <p style="margin-left: 28px">
          __________________________________________________________________________
        </p>
        <p style="margin-left: 28px">
          __________________________________________________________________________
        </p>
        <p style="margin-left: 28px">
          __________________________________________________________________________
        </p>

        <p class="content" style="letter-spacing: 4.3px">
          <span style="letter-spacing: 0px">______</span
          >后申请人多次催要被申请人均未归还,导致申请人利益
        </p>
        <p class="content" style="letter-spacing: 4.3px">遭受巨大损失。</p>

        <p class="content" style="letter-spacing: 2px; margin: 0 0 0 6%">
          <span>综上所述,申请人代为被申请人向银行偿还了共计人民币</span>
         
        </p>
        <p class="content" style="letter-spacing: 1px">
          <span>元，其中本金</span>
       
          <span>元，利息</span>
        
          <span>元，逾期复利</span>
        
          <span>元，罚</span>
        </p>
        <p class="content" style="letter-spacing: 1.8px">
          <span>息</span>
         
          <span>元，依据合同担保条款的约定申请人有权向被申请人追</span>
        </p>
        <p class="content" style="letter-spacing: 2.8px">
          偿上述欠款。故为维护申请人合法权益，申请人特向贵委提起仲
        </p>
        <p class="content" style="letter-spacing: 3.5px">
          裁，恳请贵委依法裁决申请人的以上诉求，维护法律的威严。
        </p>
        <p class="content" style="letter-spacing: 5px"></p>
        <p class="content" style="letter-spacing: 5px; margin: 12% 0 0 12%">
          <span>此致</span>
        </p>
        <p class="content" style="letter-spacing: 5px">十堰仲裁委员会</p>
        <p style="font-size: 21px; margin: 50px 0 0 60%">
          申请人: <span>____________</span>
        </p>
        <p style="font-size: 21px; margin-left: 63%">___年___月___日</p>
      </div>
    </el-form>
    <div class="xiazai">
      <el-button type="primary" @click="goTijiao" style="width: 100px"
        >保存</el-button
      >
      <el-button
        type="primary"
        @click="handleExport"
        style="width: 100px; margin-left: 10%"
        >模板下载</el-button
      >
      <button @click="exportFile">下载为Word文档</button>
    </div>
  </div>
</template>

<script>
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from "file-saver";
export default {
  name: '',
  data() {
    return {
      zcShenQing: {
        sqrName:''
      },
      id: null
    }
  },
  methods: {
     exportFile() {
      // 内容样式
      const cssStyle = `
            <style>
                .content p {
                    text-indent: 2em;
                }
                .content p .bold {
                    font-weight: bold;
                    color: red;
                }
                .content p .xiaoshi {
                    /* 小四字体样式 */
                    /* 由于px单位，是一个相对单位，在不同屏幕中大小会有差别，所以在设置字体样式采用固定单位*/
                    font-size: 12pt;
                }
                .content img {
                    border-radius: 5px;
                    margin-left: 2em;
                }
            </style>
        `;
      // 获取内容的html结构
      const boxHtml = this.$refs["box"].innerHTML;
      //构建一个word文档
      const articleContent = `
        <!doctype html>
        <html>
            <head>${cssStyle}</head>
            <body>${boxHtml}</body>
        </html>
      `;
      //将html内容进行转码
      const converted = htmlDocx.asBlob(articleContent);
      //导出html形成word文档
      saveAs(converted, `${Date.now()}.docx`);
    },
  
        //导出pdf
    handleExport() {
    },
   

    //保存
    goTijiao() {
     
       
    },
   
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.box_top {
  // height: 90px;

  .Tjboxx {
    width: 728px;
    // margin: 20px 0 40px 0;
    margin: 20px auto;
    background-color: #fff;
    border: 10px solid #efefef;
    .box_bx {
      width: 670px;
      margin: 0 auto;
    }
    h1 {
      margin-top: 20px;
      text-align: center;
    }
    h2 {
      text-align: center;
    }
    .haoma {
      margin-left: 550px;
    }
    .content {
      font-size: 21px;
      margin-left: 25px;
      // text-align: center;
      letter-spacing: 2px;
    }
    img {
      right: 178px;
      bottom: 0;
    }
  }
}
//弹出层
::v-deep .el-input--suffix .el-input__inner {
  border: none;
  border-bottom: 1px solid;
  height: 30px;
  color: #000;
}

//下载
.xiazai {
  margin-left: 41%;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  color: #000;
}
</style>